<template>
  <BasicModal
    v-bind="$attrs"
    title="导入"
    :maskClosable="false"
    :canFullscreen="false"
    :height="1000"
    @register="registerModal"
    @ok="handleSubmit"
    @cancel="
      importList = {};
      fileList = [];
    "
  >
    <!-- @ok="handleSubmit"
    @cancel="
      () => {
        importList = {};
      }" -->
    <!-- width="1000px" -->
    <!-- v-show="!importList?.results" -->
    <div class="w-full">
      <Upload.Dragger
        v-model:file-list="fileList"
        accept=".xlsx, .xls"
        :maxCount="1"
        :beforeUpload="() => false"
        @change="handleInputClick"
        @drop="handleInputClick"
        @remove="remove"
        @reject="
          () => {
            msg.warning('只能上传.xlsx文件');
          }
        "
      >
        <Icon icon="ant-design:cloud-upload-outlined" />
        <p>点击或者拖拽文件导入</p>
      </Upload.Dragger>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup name="ExportModal">
  import type { UploadProps } from 'ant-design-vue';
  import { Upload } from 'ant-design-vue';
  import { ref } from 'vue';

  import { getManagementExcelImport } from '@/api/page/manage_account';
  // import { BasicTable, useTable } from '@/components/Table';
  import Icon from '@/components/Icon/Icon.vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { useMessage } from '@/hooks/web/useMessage';

  // import { getBasicColumns } from '../data';

  const { createMessage: msg } = useMessage();
  const emit = defineEmits(['next', 'register']);

  const fileList = ref<UploadProps['fileList']>([]);
  const importList = ref<any>({});
  // 上传文件触发事件
  async function handleInputClick(target) {
    importList.value = target.file;
    if (!target.file) return;
  }

  const remove = () => {
    return true;
  };

  const [registerModal, { setModalProps, closeModal }] = useModalInner(() => {
    setModalProps({
      confirmLoading: false,
    });
  });
  async function handleSubmit() {
    try {
      if (!importList.value) throw new Error('还没有上传的文件');
      const formData = new FormData();
      formData.append('file', importList.value);
      const params = {
        file: importList.value,
      };
      const res = await getManagementExcelImport(params);
      if (res?.data.code === 1000) {
        importList.value = {};
        fileList.value = [];
        msg.success('导入成功');
        closeModal();
        emit('next', {});
      } else {
        msg.error('导入失败,请重新导入');
      }
    } catch (error) {
      msg.error('请选择要导入的文件/导入失败');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
